<template>
    <view class="fl-s-c">
			<!-- 自定义导航栏部分 -->
				<view class="w-1" style="position: sticky; left: 0; top: 0; z-index: 999;">
					<view class="w-1 relative" style="height: 278rpx; background-color: #F4F4F4;">
						<image src="/static/images/user/bg284.png" class="absolute" style="left: 0; top: 0; width: 750rpx; height: 278rpx;"></image>
						<u-navbar :border-bottom="false" title="收藏" :background="{background:'transparent'}"></u-navbar>
						<view class="search-box fr-s-c">
						    <image src="/static/images/user/search_icon.png" style="width: 34rpx; height: 34rpx;"></image>
						    <input confirm-type="search" @confirm="searchGoods" type="text" v-model="keyword" class="m-l-10 w-1 search-input" placeholder="输入商品名查找" />
						</view>
					</view>
				</view>
        <!-- 内容部分 -->
        <view class="w-1 fl-s-s p-r-30 m-t-20 relative">
            <view class="list-item w-1 fr-s-c m-b-20" @click="toDeail(item.id)" v-for="(item,index) in list" :key="index">
                <image :src="item.thumb" class="goods_images" mode="aspectFill"></image>
                <view class="m-l-20 fl-b-s flex-1" style="height: 186rpx;">
                    <text class="text-line-2 fs-30 fm-ali" style="color: #000000;">{{item.title}}</text>
                    <view class="w-1 fr-b-c">
                        <view class="fr-s-c fm-ali" style="color: #FA360A; align-items: baseline;">
                            <text class="fs-24">￥</text>
                            <text class="fs-36">{{item.price | pointsPrice}}</text>
                            <text class="fs-20">.{{item.price | pointsPrice(1)}}</text>
                        </view>
                        <!-- <view class="fr-s-c">
                            <image src="/static/images/user/not_collect.png" style="width: 39rpx; height: 34rpx;"></image>
                            <image src="/static/images/user/collected.png" style="width: 39rpx; height: 34rpx;"></image>
                            <image src="/static/images/user/add_cart.png" style="width: 44rpx; height: 44rpx; margin-left: 44rpx;"></image>
                        </view> -->
                    </view>
                </view>
            </view>
        </view>
			<view class="m-t-250" v-if="nodata">
				<u-empty mode="data"></u-empty>
			</view>
    </view>
</template>

<script>
	import {pointsPrice} from '@/utils/util.js'
    export default {
        data() {
            return {
                leftText: '收益中心',
                show: false,
                content: '反倒是风',
                countShow: true,
								page:1,
								total:0,
								nodata:false,
								list:[],
								keyword:''
            }
        },
				onLoad() {
					this.getList()
				},
				filters:{
					pointsPrice
				},
        methods: {
					getList(){
						this.$get({
							url:'/Wxapps/doPagegetCollect',
							data:{
								page:this.page,
								keyword:this.keyword
							}
						}).then(res=>{
							console.log(res)
							this.total = res.total
							this.list = this.page==1?res.list:[...this.list,...res.list]
							this.nodata = !this.list.length
						}).catch(err=>{
							this.total = 0
							this.list = []
							this.nodata = !this.list.length
						})
					},
					toDeail(id){
						uni.navigateTo({
							url: '/pages/Home/GoodsDetail/GoodsDetail?id='+id
						})
					},
            searchGoods(){
                this.page = 1
								this.getList()
            }
        }
    }
</script>

<style>
    page{
        background-color: #f4f4f4;
    }
    .common_bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 278rpx;
    }

    .money-box {
        padding: 24rpx 0;
        border-bottom: 2rpx solid #F4F4F4;
    }

    .tx-btn {
        width: 152rpx;
        height: 80rpx;
        background: #FA360A;
        border-radius: 40rpx;
        font-size: 32rpx;
        font-family: Alibaba;
        color: #FFFFFF;
    }

    .menu-item {
        border-bottom: 2rpx solid #F4F4F4;
        height: 96rpx;
        color: #000000;
        font-size: 28rpx;
        font-family: Alibaba;
    }

    .argee-btn {
        height: 100rpx;
        background: #FA360A;
        border-radius: 0rpx 0rpx 32rpx 32rpx;
        font-size: 32rpx;
        font-family: Alibaba;
        color: #FFFFFF;
    }

    >>>.u-count-num span {
        font-size: 32rpx !important;
        font-family: Alibaba !important;
        color: #FFFFFF !important;
    }
    .search-box{
        padding: 0 36rpx;
        width: 690rpx;
        height: 72rpx;
        background: #FFFFFF;
        border-radius: 36rpx;
        margin: 0 auto;
        margin-top: 30rpx;
    }
    
    .search-input{
        font-size: 26rpx;
        font-family: Alibaba;
        color: #CCCCCC;
    }
    
    .list-item{
        height: 250rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 30rpx;
    }
    
    .goods_images{
        width: 186rpx;
        height: 186rpx;
        border-radius: 12rpx;
    }
</style>
